<template>
    <div class="market-left-select-shadow" @click="marketLeftSelectorPage.close" v-show="marketLeftSelectorPage.show">
        <div class="market-left-select" @click.stop="">
            <div class="market-page">
                <div class="search-line">
                    <div class="icon" style="--icon: url(/icon/search1.svg)"></div>
                    <input type="text" v-model="searchStr" placeholder="Search" />
                </div>
                <div class="stock-list-box">
                    <div class="title-box">
                        <div class="title-list">
                            <div class="title-item" v-for="item in sub_page" :key="item.id" @click="selected_page = item" :style="`color: ${ item.id == selected_page.id ? 'var(--active-color)' : 'var(--text-color)' }; background-color: ${ item.id == selected_page.id ? 'var(--active-light-color)' : '#00000000' }`">{{ item.name }}</div>
                        </div>
                    </div>
                    <div class="stock-list">
                        <div class="stock-item" v-for="item in show_stock_list" :key="item.id" @click="changeStockFunc(item)">
                            <div class="left-box">
                                <div class="left">
                                    <div class="symbol-box">
                                        <div class="symbol">{{ item.symbol }}</div>
                                        <div class="icon" style="--icon: url(/language/lang/en.png)"></div>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="price" :style="`color: ${ parseFloat(item.change) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item.price }}</div>
                                </div>
                            </div>
                            <div class="right-box">
                                <div class="btn" @click.stop="item.is_watch = !item.is_watch">
                                    <div class="icon" :style="`--icon: url(/icon/show/nowatch.svg); opacity: ${ item.is_watch ? 0 : 1 }`"></div>
                                    <div class="icon" :style="`--icon: url(/icon/show/watch.svg); opacity: ${ item.is_watch ? 1 : 0 }`"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { stock_list, watch_list, stock_detail_data, marketLeftSelectorPage, changeStock } from '@/service/market';

const sub_page = [
    { id: 1, name: 'Stock Markets' },
    { id: 2, name: 'Watchlist' },
];

const selected_page = ref(sub_page[0]);

const searchStr = ref('');

const show_stock_list = computed(() => {
    if (selected_page.value.id == 1) {
        if (!searchStr.value) {
            return stock_list.value;
        }
        return stock_list.value.filter(item => item.symbol.toLowerCase().includes(searchStr.value.toLowerCase()));
    } else {
        if (!searchStr.value) {
            return watch_list.value;
        }
        return watch_list.value.filter(item => item.symbol.toLowerCase().includes(searchStr.value.toLowerCase()));
    }
});

// 切换股票的逻辑
function changeStockFunc(item) {
    stock_detail_data.value = item;
    changeStock(item.symbol);
    marketLeftSelectorPage.close();
}
</script>

<style scoped lang="less">
.market-left-select-shadow {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-color: #88888880;

    .market-left-select {
        width: 70vw;
        height: 100vh;
        background-color: #fff;
        border-radius: 0 2vw 2vw 0;
        position: absolute;
        top: 0;
        left: 0;

        .market-page {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 2vw;

            .search-line {
                display: flex;
                align-items: center;
                gap: 2vw;
                margin-bottom: 2vw;
                padding: 1.5vw 2vw;
                background-color: var(--bg-strong-color);
                border-radius: 2vw;

                .icon {
                    --size: 4vw;
                    --w: var(--size);
                    --h: var(--size);
                }

                input {
                    flex: 1;
                    font-size: 3.5vw;
                    background-color: #00000000;
                    border: 0;
                    outline: 0;
                }
            }

            .stock-list-box {
                display: flex;
                flex-direction: column;
                gap: 3vw;

                .title-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 3vw;

                    .title-list {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        gap: 3vw;

                        .title-item {
                            box-sizing: border-box;
                            flex: 1;
                            padding: 1vw 2vw;
                            font-size: 3.5vw;
                            font-weight: 500;
                            text-align: center;
                            border-radius: 2vw;
                        }
                    }
                }

                .stock-list {
                    box-sizing: border-box;
                    padding: 2vw;
                    display: flex;
                    flex-direction: column;
                    gap: 2vw;

                    .stock-item {
                        box-sizing: border-box;
                        width: 100%;
                        padding: 3vw 4vw;
                        display: flex;
                        justify-content: space-between;
                        gap: 3vw;
                        background-color: var(--bg-light-color);
                        border-radius: 2vw;

                        .left-box {
                            flex: 1;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap: 2vw;

                            .left, .right {
                                display: flex;
                                flex-direction: column;
                            }
                            
                            .left {
                                .symbol-box {
                                    display: flex;
                                    align-items: center;
                                    gap: 2vw;

                                    .symbol {
                                        font-size: 3vw;
                                        font-weight: 700;
                                    }

                                    .icon {
                                        --size: 4vw;
                                        --w: var(--size);
                                        --h: var(--size);
                                    }
                                }
                            }

                            .right {
                                align-items: flex-end;

                                .price {
                                    font-size: 3vw;
                                    font-weight: 500;
                                    color: var(--text-color);
                                }
                            }
                        }

                        .right-box {
                            width: 7vw;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            
                            .btn {
                                --size: 3.5vw;
                                --w: var(--size);
                                --h: var(--size);
                                width: var(--w);
                                height: var(--h);
                                position: relative;

                                .icon {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>